import React, { Component } from 'react';

import 'element-theme-default';
import axios from '../request';

import { Carousel } from 'element-react';

export default class zouma extends Component {
    state={
        photoList:[],
        
    }
    render() {
        const { photoList } = this.state
        const {time , auto , arrow} = this.props
        console.log(auto)
        let autoplay1
        if(auto===true){
            autoplay1=(
            <Carousel height="150px"  interval={time} arrow={arrow} autoplay={auto} >
                
            {
              photoList.map((item, index) => {
                return (
                  <Carousel.Item key={index} >
                    <h3><img className="pho"  src={item.image_src}/></h3>
                  </Carousel.Item>
                )
              })
            }
          </Carousel>
          )
        }else{
            autoplay1=(
                <Carousel height="150px"  interval={time} arrow={arrow} autoplay={false} >
                
            {
              photoList.map((item, index) => {
                return (
                  <Carousel.Item key={index} >
                    <h3><img className="pho"  src={item.image_src}/></h3>
                  </Carousel.Item>
                )
              })
            }
          </Carousel>
            )
        }
        return (
            
            <div className="demo-1 small">
            <div className="block">
              <span className="demonstration"></span>
              {autoplay1}
            </div>
          </div>
                  
           
        )
    }
    componentDidMount(){
        axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata").then(photoList=>{
            console.log(photoList)
            this.setState({
                photoList
            })
        })
        
        console.log(this.props)
    }
    componentWillMount(){
        if(this.auto === "autoplay"){
            this.auto = true
            console.log(this.props)
        }
    }
}
